<template>
    <div>
       <router-link 
       tag="div" 
       to="/" 
       class="header-abs"
       v-show="showAbs">
           <div class="iconfont header-abs-back">&#xe624;</div>
       </router-link>
       <div 
       class="header-fixed" 
       v-show="!showAbs"
       :style="opacityStyle"
       >
           <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
           景点详情
       </div>
    </div>
</template>
<script>
export default {
    name:'DetailHeader',
    data() {
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    // 因为 keep-alive 页面只要被展示 activated 钩子就会被执行
    activated () { // 页面出现时
        // 全局事件绑定 
        window.addEventListener("scroll",this.handleScroll)
    },
    deactivated (){ // 页面消失时
        // 全局事件解绑
        window.removeEventListener("scroll",this.handleScroll)
    },
    methods:{
        handleScroll:function(){
           const top = document.documentElement.scrollTop
           if(top > 60){
               let opacity = top / 140
               opacity = opacity > 1 ? 1 : opacity
               this.opacityStyle = {
                   opacity:opacity
               }
               this.showAbs = false
           } else {
               this.showAbs = true
           }
        }
    }
   
}
</script>
<style scoped lang='stylus'>
@import "~styles/varibles.styl"
.header-abs 
    position:absolute
    left:.2rem
    top:.2rem
    width:.8rem
    height:.8rem
    line-height:.8rem
    border-radius:.4rem
    text-align:center
    background:rgba(0,0,0,.8)
    .header-abs-back
      color:#fff
      font-size:.4rem
.header-fixed
    z-index:2
    //overflow: hidden
    position:fixed
    top:0
    left:0
    right:0
    height:$headerHeight
    line-height:$headerHeight
    text-align:center
    color:#fff
    background:$bgColor
    font-size:.32rem
    .header-fixed-back
        position:absolute
        top:0
        left:0
        text-align:center
        width:.64rem
        font-size:.4rem
        color:#fff

</style>
